import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '../store';
import { createProject } from '../store/projectsSlice';
import {
  Box,
  Card,
  CardContent,
  TextField,
  Button,
  Typography,
  Grid,
} from '@mui/material';
import { useFormik } from 'formik';
import * as yup from 'yup';

const validationSchema = yup.object({
  name: yup.string().required('Name is required'),
  bundle_id: yup.string().required('Bundle ID is required'),
  apple_id: yup.string().required('Apple ID is required'),
  username: yup.string().required('Username is required'),
});

const CreateProject: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch<AppDispatch>();

  const formik = useFormik({
    initialValues: {
      name: '',
      bundle_id: '',
      apple_id: '',
      username: '',
      asc_key_id: '',
      asc_issuer_id: '',
      asc_key_file: '',
    },
    validationSchema,
    onSubmit: async (values) => {
      try {
        await dispatch(createProject(values)).unwrap();
        navigate('/');
      } catch (error) {
        console.error('Failed to create project:', error);
      }
    },
  });

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Create New Project
      </Typography>
      <Card>
        <CardContent>
          <form onSubmit={formik.handleSubmit}>
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  id="name"
                  name="name"
                  label="Project Name"
                  value={formik.values.name}
                  onChange={formik.handleChange}
                  error={formik.touched.name && Boolean(formik.errors.name)}
                  helperText={formik.touched.name && formik.errors.name}
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  id="bundle_id"
                  name="bundle_id"
                  label="Bundle ID"
                  value={formik.values.bundle_id}
                  onChange={formik.handleChange}
                  error={formik.touched.bundle_id && Boolean(formik.errors.bundle_id)}
                  helperText={formik.touched.bundle_id && formik.errors.bundle_id}
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  id="apple_id"
                  name="apple_id"
                  label="Apple ID (App ID)"
                  value={formik.values.apple_id}
                  onChange={formik.handleChange}
                  error={formik.touched.apple_id && Boolean(formik.errors.apple_id)}
                  helperText={formik.touched.apple_id && formik.errors.apple_id}
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  id="username"
                  name="username"
                  label="Apple ID Username"
                  value={formik.values.username}
                  onChange={formik.handleChange}
                  error={formik.touched.username && Boolean(formik.errors.username)}
                  helperText={formik.touched.username && formik.errors.username}
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  id="asc_key_id"
                  name="asc_key_id"
                  label="App Store Connect Key ID (Optional)"
                  value={formik.values.asc_key_id}
                  onChange={formik.handleChange}
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  id="asc_issuer_id"
                  name="asc_issuer_id"
                  label="App Store Connect Issuer ID (Optional)"
                  value={formik.values.asc_issuer_id}
                  onChange={formik.handleChange}
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  id="asc_key_file"
                  name="asc_key_file"
                  label="App Store Connect Key File Path (Optional)"
                  value={formik.values.asc_key_file}
                  onChange={formik.handleChange}
                />
              </Grid>
              <Grid item xs={12}>
                <Box display="flex" justifyContent="flex-end" gap={2}>
                  <Button
                    variant="outlined"
                    onClick={() => navigate('/')}
                  >
                    Cancel
                  </Button>
                  <Button
                    type="submit"
                    variant="contained"
                    color="primary"
                  >
                    Create Project
                  </Button>
                </Box>
              </Grid>
            </Grid>
          </form>
        </CardContent>
      </Card>
    </Box>
  );
};

export default CreateProject;
